<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>KISSY Lazy Tree</title>
    <link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
    <link href="../../../../src/button/assets/dpl.css" rel="stylesheet"/>
    <link href="../../assets/dpl.css" rel="stylesheet"/>
</head>
<body>
<div class="container">


    <h1>KISSY Lazy Tree</h1>


    <div id="treeContainer" style="width: 200px;">

    </div>

    <hr/>

    <script src="/kissy/build/seed-debug.js"></script>
    <script src="/kissy/src/package.js"></script>

    <script>
        KISSY.use("tree,node,util", function (S, Tree,$,util) {

            var data = {
                content: "淘宝网",
                children: [
                    {
                        content: "收藏夹",
                        children: [
                            {
                                content: "收藏的宝贝"
                            },
                            {
                                content: "收藏的店铺"
                            }
                        ]
                    },
                    {
                        content: "我的淘宝",
                        children: [
                            {
                                content: "已买到的宝贝"
                            },
                            {
                                content: "已卖出的宝贝"
                            }
                        ]
                    }
                ]
            };

            function getNode(node, content) {
                if (node.content == content) {
                    return node;
                }
                var c = node.children || [];
                for (var i = 0; i < c.length; i++) {
                    var t = getNode(c[i], content);
                    if (t) {
                        return t;
                    }
                }
                return null;
            }

            var tree = new Tree.CheckTree({
                content: "淘宝网",

                isLeaf: false,
                // showRootNode:false,
                render: "#treeContainer"
            });

            var CheckNode = Tree.CheckNode;
            var CheckState=CheckNode.CheckState;

            tree.on("expand", function (e) {
                var node = e.target;
                if (!node.get('children').length) {
                    var c = getNode(data, node.get("content")).children;
                    var nodeCheckState = node.get("checkState");
                    util.each(c, function (v) {
                        node.addChild(new Tree.CheckNode({
                            isLeaf: !(v.children && v.children.length),
                            checkState: nodeCheckState == CheckState.CHECK ? CheckState.CHECK : CheckState.EMPTY,
                            content: v.content
                        }));
                    });
                }
            });
            tree.render();
        });
    </script>
</div>
</body>
</html>